<template>
  <div class="page-wrap">
    <div class="page-title">transfer 穿梭框</div>
    <div class="page-sub-title">基础用法</div>
    <cdsTagTransfer
      :titles="['候选标签','已添加标签']"
      :item="list"
      placement="right"
      filterable
      filterPlaceholder="请输入"
      v-model="addLabel"
      @addTag="click"
      @closeTag="closeTag"
      closable/>
  
    <cdsTagTransfer
      :titles="['候选标签','已添加标签']"
      :buttonTexts="['左移', '右移']"
      :item="list"
      v-model="addLabel1"
      placement="right"
      @addTag="click"
      />
    <highlightjs
      language="shell"
      :code="code"
    />
    <div class="page-sub-title">Attributes</div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="available"
        label="可选值">
      </el-table-column>
      <el-table-column
        prop="default"
        label="默认值">
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup>
import {nextTick, ref, watch} from 'vue'
import {cdsTagTransfer} from 'cds-ui-business-components'
import {ElMessage} from "element-plus";
let list = ref([{key: 1, label: 'wsdgd dddddd dddddddd dddd362w34645756dddd ddddww'}, {key: 2, label: 'w22ww'}, {key: 3, label: 'ww333w'}])
const addLabel = ref([{key: 2, label: 'w22ww'}])
const addLabel1 = ref([])
const click = (val) => {
  ElMessage.success(val)
  list.value.push({key: val, label: val})
}
const closeTag = (val) => {
  console.info(val)
  ElMessage.success(val.label)
}
watch(()=>addLabel.value, ()=>{
  console.info(addLabel.value)
})

const code = `
<template>
 <CdsTransfer
      :titles="['候选标签','已添加标签']"
      :item="list"
      placement="right"
      filterable
      filterPlaceholder="请输入"
      v-model="addLabel"
      @addTag="click"
      @closeTag="closeTag"
      closable
      />
  
    <CdsTransfer
      :titles="['候选标签','已添加标签']"
      :buttonTexts="['左移', '右移']"
      :item="list"
      v-model="addLabel1"
      placement="right"
      @addTag="click"
      closable/>
</template>`


const tableData = [
  {field: 'placement', desc: '文字提示显示位置', type: 'String', available: 'top， bottom， left， right(同el-tooltip)', default: 'right'},
  {field: 'closable', desc: '标签是否可删除', type: 'Boolean', available: 'true/false', default: 'false'},
  {field: 'filterable', desc: '是否可搜索', type: 'Boolean', available: 'true/false', default: 'false'},
  {field: 'filterPlaceholder', desc: '搜索框的placeholder', type: 'String', available: '', default: '--'},
  {field: 'item', desc: '标签的所有数据', type: 'Array', available: '', default: '--'},
  {field: 'titles', desc: '左右面板的标题', type: 'Array', available: '', default: '--'},
  {field: 'buttonTexts', desc: '移动按钮的文字', type: 'Array', available: '', default: '--'},
  {field: 'config', desc: '配置key和label对应的字段名', type: 'Object', available: '', default: '{label: label,key: key}'},
  {field: 'inputText', desc: '配置添加标签的输入框和按钮的文字内容', type: 'Object', available: '', default: '{placeholder: "",buttonText: "添加"}'},
 
]
</script>

<style lang="scss">
</style>
